<template>
  <div class="topic" :style="{backgroundColor:bjys,backgroundImage:'url('+bjt+')',backgroundSize:'100% auto',backgroundRepeat:'no-repeat',minHeight:llqheight+'px'}">

    <div class="top_ph">
    </div>
    <div class="topic_content">

      <div class="tishu">(当前第{{dqpage+1}}题/共{{total}}题)</div>
      <div class="huodong" style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">{{title}}</div>
      <div class="box">
        <div class="quebox">
          <div class='contit'>
            <span>{{dqpage+1}}</span>
            <span class='contitlx' v-if="nrlist.nrlx == 1">(单选题)</span>
            <span class='contitlx' v-if="nrlist.nrlx == 2">(多选题)</span>
            <span class='contitlx' v-if="nrlist.nrlx == 3">(输入框)</span>
            <span>{{nrlist.title}}</span>
          </div>
          <!--<div class='conbody'>
			             <img class='titimg' v-if="dqtm.FTP != null && dqtm.FTP != ''" :src='dqtm.FTP' >
			        </div>-->

          <div class='dalist' v-if="nrlist.nrlx != 3">
            <mt-radio v-if="nrlist.nrlx == 1" v-model="value" :options="options">
            </mt-radio>
            <!-- {{value1}} -->
            <mt-checklist v-if="nrlist.nrlx == 2" v-model="value1" :options="options">
            </mt-checklist>
            <!-- <div class='da' v-for="(ite,idx) in nrlist.nrxxlist" :key="idx" @click="check(idx)"> -->
            <!-- <i v-if="nrlist.nrlx == 1" class="iconfont icon-dxk"></i> -->
            <!-- <i v-if="nrlist.nrlx == 2" class="iconfont icon-fxk"></i> -->
            <!-- {{ite.XXMC}} -->
            <!-- <div class='xx'>{{ite.XXNR}}</div> -->
            <!-- <label for="">rad</label> -->

            <!-- <div class='nr' v-if="ite.FTP != null && ite.FTP != ''">
								<img class='xximg' :src='ite.XXMC || ""' />
							</div> -->
            <!-- <div class='nr' v-else>{{ite.XXCONTENT}}</div> -->
            <!-- </div> -->
          </div>
          <div v-else class="dalist">
            <textarea name="" v-model="textarea" class="textarea" cols="30" rows="5" placeholder="请输入你的内容"></textarea>
          </div>
          <div class="daimg" v-if="pageimg">
            <img :src="pageimg" alt="">
          </div>
          </div>
        </div>
        <div class="anbox">
          <div class="nBtn syt" v-if=" dqpage != 0 " @click="prevfn()">上一题</div>
          <div class="nBtn" @click="nextfn()">{{!wcbtn?'下一题':'提交'}}</div>
        </div>

        <!-- <div class="nBtn" v-else @click="tjfn">提交</div> -->
      </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import apiQues from "@/api/question";
import { MessageBox, Toast, Radio, Checklist } from "mint-ui";

export default {
  data() {
    return {
      value: "",
      value1: [],
      tmlist: [],
      textarea: "",
      dqtm: [],
      tmxb: 0,
      tkname: "",
      total: 0,
      title: "",
      data1: {},
      dqpage: 0, //当前问题索引
      options: [],
      nrlist: {
        title: "",
        nrlx: 0,
        nrxxlist: []
      },
      pageimg: "",
      lastpagezt: false,
      jsonData: [
        // { WJNRID: "Google", WJDA: "A", WJNRXXID: "123456" },
        // { WJNRID: "Baidu", WJDA: "AB", WJNRXXID: "789456" }
      ],
      alljsonData: [],
      allpageindex: [],
      dppagejsondata: [],
      dppagexxlength: 0,
      wcbtn: false,
      bjt: "",
      bjys: "",
      llqheight: document.documentElement.clientHeight
    };
  },
  methods: {
    ...mapActions({
      commit_title: "commit_title"
    }),
    check(index) {
      let that = this;
      return;
      let dqtm = that.dqtm;
      let checks = dqtm.xxlist[index].check;
      if (dqtm.TMTYPE == 1) {
        for (let i = 0; i < dqtm.xxlist.length; i++) {
          dqtm.xxlist[i].check = false;
        }
      }
      dqtm.xxlist[index].check = !checks;
      that.dqtm = dqtm;
    },
    // 上一题
    prevfn() {
      let that = this;
      that.dqpage = that.dqpage - 1;
      if (that.data1.rows[that.dqpage].NRLX == 1) {
        that.value = that.allpageindex[that.dqpage][0]; //单选
      }
      if (that.data1.rows[that.dqpage].NRLX == 2) {
        that.value1 = that.allpageindex[that.dqpage]; //当前索引 多选
      }

      if (that.data1.rows[that.dqpage].NRLX == 3) {
        that.textarea = that.allpageindex[that.dqpage][0]; //当前索引 多选
      }

      that.wcbtn = false;

      that.nrlist.title = that.data1.rows[that.dqpage].CONTENT;
      that.nrlist.nrxxlist = that.data1.rows[that.dqpage].nrxx;
      var options = [];
      for (var i = 0; i < that.nrlist.nrxxlist.length; i++) {
        options.push({
          label: that.nrlist.nrxxlist[i].XXNR,
          value: that.nrlist.nrxxlist[i].XXMC.toString()
        });
      }
      that.options = options;
      that.nrlist.nrlx = that.data1.rows[that.dqpage].NRLX;
      if (that.data1.rows[that.dqpage].NRTP.length > 0) {
        that.pageimg =
          that.host.filehost + that.data1.rows[that.dqpage].NRTP[0].ID;
      } else {
        that.pageimg = "";
      }
    },
    // 下一题
    nextfn() {
      let that = this;
      // try{
      //   that.value1 = that.allpageindex[that.dqpage]; //当前索引 多选
      //   that.value = that.allpageindex[that.dqpage][0]; //单选
      // }catch(e){
      // }
      if (that.data1.rows[that.dqpage].NRLX == 1 && that.value.length == 0) {
        Toast({
          message: "请选择一项内容",
          duration: 1500
        });
      } else if (
        that.data1.rows[that.dqpage].NRLX == 2 &&
        that.value1.length == 0
      ) {
        Toast({
          message: "请选择一项或者多项内容",
          duration: 1500
        });
      } else if (
        that.data1.rows[that.dqpage].NRLX == 3 &&
        that.textarea == ""
      ) {
        Toast({
          message: "请输入内容",
          duration: 1500
        });
      } else {
        // if (that.value == "" && that.value1 == [] && that.textarea == "") {

        //   // 单选框  复选框   多行文本都为空
        //   if (that.data1.rows[that.dqpage].NRLX != 3) {
        //     Toast({
        //       message: "请选择一项或者多项内容",
        //       duration: 1500
        //     });
        //   } else {
        //     Toast({
        //       message: "请输入内容",
        //       duration: 1500
        //     });
        //   }
        // }
        // 点击下一题的时候 如果有保存的数据就重新复制
        if (that.alljsonData.length == 0) {
        } else {
          // var newalljsonData = [];
          for (var i = 0; i < that.alljsonData.length; i++) {
            if (that.alljsonData[i].WJNRID == that.dppagejsondata[0].WJNRID) {
              // newalljsonData.push(that.alljsonData[i])
              that.alljsonData.splice(i, that.dppagexxlength);
            }
          }
        }
        // 选择了选项
        if (that.dqpage <= that.data1.rows.length - 1) {
          // debugger;
          that.nrlist.title = that.data1.rows[that.dqpage].CONTENT;
          that.nrlist.nrxxlist = that.data1.rows[that.dqpage].nrxx;
          var options = [];
          for (var i = 0; i < that.nrlist.nrxxlist.length; i++) {
            options.push({
              label: that.nrlist.nrxxlist[i].XXNR,
              value: that.nrlist.nrxxlist[i].XXMC.toString()
            });
          }
          that.options = options;
          that.nrlist.nrlx = that.data1.rows[that.dqpage].NRLX;
          if (that.data1.rows[that.dqpage].NRTP.length > 0) {
            that.pageimg =
              that.host.filehost + that.data1.rows[that.dqpage].NRTP[0].ID;
          } else {
            that.pageimg = "";
          }

          // 推一个数组
          if (that.data1.rows[that.dqpage].NRLX == 1) {
            //   单选
            var WJDA = that.value;
            // console.log(WJDA,'WJDA');
            var nrxxls = that.data1.rows[that.dqpage].nrxx;
            var NRID = that.data1.rows[that.dqpage].nrxx[WJDA - 1].ID;
            for (var k = 0; k < nrxxls.length; k++) {
              if (nrxxls[k].XXMC == WJDA) {
                NRID = nrxxls[k].ID;
              }
            }
            var dqarr = {
              WJNRID: that.data1.rows[that.dqpage].ID,
              WJDA: WJDA,
              WJNRXXID: NRID
            };
            that.jsonData.push(dqarr);
          } else if (that.data1.rows[that.dqpage].NRLX == 2) {
            var WJDA = that.value1;
            var dqarr;
            for (var i = 0; i < that.value1.length; i++) {
              var j = that.value1[i];
              var nrxxls = that.data1.rows[that.dqpage].nrxx;
              var NRID = that.data1.rows[that.dqpage].nrxx[j - 1].ID;
              for (var k = 0; k < nrxxls.length; k++) {
                if (nrxxls[k].XXMC == j) {
                  NRID = nrxxls[k].ID;
                }
              }
              dqarr = {
                WJNRID: that.data1.rows[that.dqpage].ID,
                WJDA: j,
                // WJNRXXID: that.data1.rows[that.dqpage].nrxx[j - 1].ID
                WJNRXXID: NRID
              };
              that.jsonData.push(dqarr);
            }
          } else if (that.data1.rows[that.dqpage].NRLX == 3) {
            //  文本
            var dqarr = {
              WJNRID: that.data1.rows[that.dqpage].ID,
              WJDA: that.textarea,
              WJNRXXID: ""
            };
            that.jsonData.push(dqarr);
          }
          that.dppagexxlength = that.jsonData.length;

          that.alljsonData[that.dqpage] = 0;
          that.alljsonData[that.dqpage] = cloneObj(that.jsonData); //存入总数据要提交的
          var lsindex = [];
          for (var i = 0; i < that.jsonData.length; i++) {
            lsindex.push(that.jsonData[i].WJDA);
          }
          that.allpageindex[that.dqpage] = lsindex;
          console.log(that.allpageindex, "汇总that.allpageindex");

          console.log(that.alljsonData, "alljsondata");
          console.log(that.dppagexxlength, "dppagexxlength");
          // console.log(newalljsonData,'新alljsondata');

          that.dppagejsondata = cloneObj(that.jsonData); //临时当前页面数据
          //拷贝方法
          function cloneObj(obj) {
            var str,
              newobj = obj.constructor === Array ? [] : {};
            if (typeof obj !== "object") {
              return;
            } else if (window.JSON) {
              (str = JSON.stringify(obj)), //系列化对象
                (newobj = JSON.parse(str)); //还原
            } else {
              for (var i in obj) {
                newobj[i] =
                  typeof obj[i] === "object" ? cloneObj(obj[i]) : obj[i];
              }
            }
            return newobj;
          }
          that.jsonData.length = 0; //清空当前页临时数据

          that.value = "";
          that.value1 = [];
          that.textarea = "";

          // if(that.data1.rows[that.dqpage+1].NRLX == 1){
          //
          // }else if(that.data1.rows[that.dqpage].NRLX == 2){
          //
          // }else if(that.data1.rows[that.dqpage].NRLX == 3){
          // }
          // that.allpageindex.length
          // debugger;
          //看临时数据是否有选中的选项列表
          if (that.allpageindex.length > that.dqpage + 1) {
            that.value = that.allpageindex[that.dqpage + 1][0]; //单选
            that.value1 = that.allpageindex[that.dqpage + 1]; //当前索引 多选
            that.textarea = that.allpageindex[that.dqpage + 1];
          }

          console.log(that.jsonData, "jsonData");

          if (that.dqpage < that.data1.rows.length - 1) {
            that.dqpage = that.dqpage + 1;
            that.nrlist.title = that.data1.rows[that.dqpage].CONTENT;
            that.nrlist.nrxxlist = that.data1.rows[that.dqpage].nrxx;
            var options = [];

            for (var i = 0; i < that.nrlist.nrxxlist.length; i++) {
              options.push({
                label: that.nrlist.nrxxlist[i].XXNR,
                value: that.nrlist.nrxxlist[i].XXMC.toString()
              });
            }
            that.options = options;
            that.nrlist.nrlx = that.data1.rows[that.dqpage].NRLX;

            if (that.data1.rows[that.dqpage].NRTP.length > 0) {
              that.pageimg =
                that.host.filehost + that.data1.rows[that.dqpage].NRTP[0].ID;
            } else {
              that.pageimg = "";
            }
          } else {
            console.log("可以提交了");

            // 开始提交
            let wjdcid = this.$route.params.id;
            let xfvipcode = JSON.parse(sessionStorage.getItem("userinfo"))
              .vipcode;

            console.log(that.alljsonData, "alljsonData");

            var lsalljsonData = reduceDimension(that.alljsonData);

            function reduceDimension(arr) {
              var reduced = [];
              for (var i = 0; i < arr.length; i++) {
                for (var j = 0; j < arr[i].length; j++) {
                  reduced.push(arr[i][j]);
                }
              }
              return reduced;
            }
            let newlsalljsonData = JSON.stringify(lsalljsonData);
            console.log(newlsalljsonData, "要提交的json");
            apiQues.saveWjdcJg(
              that,
              wjdcid,
              xfvipcode,
              newlsalljsonData,
              function(res) {
                let data = res.data;
                console.log(data, "保存");
                if (data.code == 0) {
                  var jfdata = JSON.parse(data.data);
                  if (jfdata.wjjf == 0) {
                    MessageBox({
                      title: "温馨提示",
                      message: "感谢您参与本次调查!",
                      showCancelButton: true,
                      showCancelButton: false,
                      confirmButtonText: "确定",
                      closeOnClickModal: false,
                      confirmButtonClass: "zcbtn"
                    }).then(action => {
                      console.log("then");
                      that.$router.go(-1);
                    });
                  } else {
                    MessageBox({
                      title: "温馨提示",
                      message: "感谢您参与本次调查,送您" + jfdata.wjjf + "积分",
                      showCancelButton: true,
                      showCancelButton: false,
                      confirmButtonText: "确定",
                      closeOnClickModal: false,
                      confirmButtonClass: "zcbtn"
                    }).then(action => {
                      console.log("then");
                      that.$router.go(-1);
                    });
                  }
                } else {
                  MessageBox({
                    title: "提示",
                    message: data.msg,
                    showCancelButton: true,
                    showCancelButton: false,
                    confirmButtonText: "确定",
                    closeOnClickModal: false,
                    confirmButtonClass: "zcbtn"
                  }).then(action => {
                    console.log("then");
                    that.$router.go(-1);
                  });
                }
              }
            );
          }
        } else {
        }
        if (that.dqpage == that.data1.rows.length - 1) {
          that.wcbtn = true;
        }
      }
    }
  },
  mounted() {
    let that = this;
    let id = this.$route.params.id;
    console.log(id, "地址栏id");
    let wjdcid = id;
    let row = 100;
    let num = 1;
    let xfvipcode = JSON.parse(sessionStorage.getItem("userinfo")).vipcode;
    apiQues.getWjnrList(that, wjdcid, row, num, xfvipcode, function(res) {
      let data = res.data;
      if (data.code == 0) {
        data = JSON.parse(data.data);
        console.log(data, "问卷调查内容");
        that.data1 = data;
        that.title = data.rows[that.dqpage].wjbt; //问卷标题
        // that.commit_title(data.rows[that.dqpage].wjbt);
        document.title = data.rows[that.dqpage].wjbt;
        console.log(document, document.title, "标题");
        that.nrlist.title = data.rows[that.dqpage].CONTENT; //问题标题
        that.nrlist.nrxxlist = data.rows[that.dqpage].nrxx; //问题内容

        if (data.rows[0].bjt.length > 0) {
          that.bjt = that.host.filehost + data.rows[0].bjt[0].ID;
        } else {
          that.bjt = "";
        }
        that.bjys = data.rows[0].bjys;
        if (data.rows[that.dqpage].NRTP.length > 0) {
          that.pageimg = that.host.filehost + data.rows[that.dqpage].NRTP[0].ID;
        } else {
          that.pageimg = "";
        }

        var options = [];
        for (var i = 0; i < that.nrlist.nrxxlist.length; i++) {
          options.push({
            label: that.nrlist.nrxxlist[i].XXNR,
            value: that.nrlist.nrxxlist[i].XXMC.toString()
          });
        }
        that.options = options;
        that.nrlist.nrlx = data.rows[that.dqpage].NRLX; //问题类型
        that.total = data.total; //条数
        if (data.total == 1) {
          that.wcbtn = true;
        }
      } else {
        Toast({
          message: data.msg,
          duration: 1500
        });
        setTimeout(function() {
          that.$router.push({ path: "/questionnaire" });
        }, 1500);
      }
    });
  }
};
</script>

<style lang="less" scope>
.topic {
  background-color: #ffffff;
  min-height: 100vh;
  height: 100%;
  .top_ph {
    width: 100%;
    height: 4.9rem;
    // background: url(http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/2777720180809133542065.jpg) no-repeat top;
    background-size: cover;
  }
  .topic_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 0.3rem;
    .tishu {
      color: #e63b31;
      font-size: 0.26rem;
      height: 0.5rem;
      width: 3rem;
      text-align: center;
      line-height: 0.5rem;
      position: absolute;
      top: -0.3rem;
      left: 50%;
      margin-left: -1.5rem;
    }
    .huodong {
      font-weight: bold;
      font-size: 0.38rem;
      line-height: 0.56rem;
      padding: 0 0.3rem;
      margin-bottom: 0.2rem;
    }
    .box {
      padding: 0.2rem;
      // background-color: #fad7ad;
      border-radius: 0.34rem;
      box-sizing: border-box;
      .quebox {
        width: 5.6rem;
        border-radius: 0.34rem;
        background-color: #ffffff;
        padding: 0.3rem 0.4rem;
        min-height: 3.2rem;
        overflow-y: scroll;
      }
    }
    .anbox {
      display: flex;
      justify-items: center;
      .nBtn {
        width: 3rem;
        height: 0.72rem;
        border-radius: 0.36rem;
        background-color: #e63b31;
        color: #ffffff;
        text-align: center;
        line-height: 0.72rem;
        font-size: 0.36rem;
        //   position: fixed;
        //   bottom: 0.3rem;
        //   left: 50%;
        //   margin-left: -1.71rem;
        margin: 0.4rem auto;
      }
      .syt {
        margin: 0.4rem auto 0 auto;
        margin-right: 0.1rem;
      }
    }

    .contit {
      line-height: 0.4rem;
      font-size: 0.32rem;
    }

    .contitlx {
      color: #e63b31;
      margin-right: 0.1rem;
    }

    .conbody {
      color: #000;
      /* text-indent: 2em; */
      line-height: 1.8em;
      margin-bottom: 0.4rem;
    }
    .dalist {
      padding-top: 0.1rem;
      .textarea {
        border: 1px solid #cccccc;
        width: 100%;
        font-size: 0.28rem;
        font-family: "微软雅黑";
        margin-top: 0.2rem;
      }
    }
    .da {
      color: #333333;
      margin-bottom: 0.1rem;
      position: relative;
      display: flex;
      align-items: center;
      height: 0.6rem;
      i {
        margin-right: 0.16rem;
        color: #999999;
        font-size: 0.32rem;
      }
    }

    .xx {
      //   width: 0.5rem;
      line-height: 0.6rem;
    }
    .nr {
      line-height: 0.6rem;
    }
  }
}
</style>